<template>
	<view class="content Column">
		<view class="Flex1" @click="OnChose"></view>
		<view class="couponbg">
			<view class="Row title" style="">
				<view class=""></view>
				<text>优惠券</text>
				<image src="../../static/reddenvelope/guanbi@3x.png" class="close" @click="OnChose"></image>
			</view>
			<text style="margin-left: 30upx;">可用优惠券</text>
			<scroll-view class="Column transport Flex1 scroll-view " scroll-y style="">
				<radio-group @change="radioChange" class="width100" v-if="couponList.length > 0">
					<view class="Column width100" v-for="coupon in couponList" :key="coupon.id">
						<view class="Row width100 " style="align-items: center;">
							<couponitem :value="coupon" class="margin30" :showlingqubtn="true" :pages="'packagedetail'" :used="coupon.gifttype == 2"></couponitem>
						</view>
					</view>
				</radio-group>
				<view class="Column width100" v-else style="align-items: center;">
					<image src="../../static/reddenvelope/wuyouhuiquan.png" style="width: 200upx;height: 180upx;margin-top: 20upx;"></image>
					<text style="margin-top: 20upx;">暂无可以领取的优惠券</text>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import couponitem from "./couponItem.vue"
	export default {
		components: {
			couponitem
		},
		props: {
			couponList: {
				type: Array,
				default: (e) => {
					return []
				}
			},
		},
		data() {
			return {
				height: 0,
				typeList: ["", "券品类咖券", "限套餐咖券", "限品类咖券"],
				selecteIndex: 0
			};
		},
		mounted() {
			for (var i = 0; i < this.couponList.length; i++) {
				
				this.couponList[i].open = false
				this.couponList[i].uid = 0
				console.log(this.couponList[i].state)
				if (this.couponList[i].state == 2) {
					//可领取
					this.couponList[i].uid = 0
				} else {
					//已领取 可使用
					this.couponList[i].uid = 1
				}

				if (this.couponList[i].gettype == 1) {
					this.couponList[i].state = 3
				}
				// console.log(this.couponList[i])
			}
		},
		methods: {
			OnChose() {
				let coupon = this.couponList[this.selecteIndex]
				this.$emit('close', coupon); //$emit

			},
			radioChange(res) {
				this.selecteIndex = res.detail.value
				// console.log(res)
			},
			OpenRule(coupon) {
				coupon.open = !coupon.open
			}
		},
	}
</script>

<style>
	.content {
		position: fixed;
		top: 0upx;
		left: 0upx;
		height: 100vh;
		width: 750upx;
		background: rgba(0, 0, 0, 0.7);
		color: #333;
		font-size: 28upx;
		z-index: 99;
	}

	.title {
		justify-content: space-between;
		align-items: center;
		font-size: 35upx;
		margin-top: 30upx;
	}

	.couponbg {
		height: 1000upx;
		width: 100%;
		background-color: #FFFFFF;
		border-top-right-radius: 30upx;
		border-top-left-radius: 30upx;
	}

	.close {
		width: 40upx;
		height: 40upx;
		margin-right: 40upx;
	}

	.scroll-view {
		width: 100%;
		height: 820upx;
		margin-top: 40upx;
		margin-bottom: 15upx;
		align-items: center;
	}


	.couponruleopen {
		width: 550upx;
		height: 55upx;
		margin-left: 30upx;
		background-image: url('../../static/reddenvelope/couponopen.png');
		background-size: 100% 100%;
		border-bottom-right-radius: #267ce7 30upx;
		border-bottom-left-radius: #267ce7 30upx;
		color: #333333;
		font-size: 20upx;
	}

	.coupontype {
		width: 100upx;
		height: 30upx;
		background-color: #267ce7;
		border-radius: 8upx;
	}

	.gengduotaocan {
		width: 30upx;
		height: 30upx;
		margin-right: 30upx;
	}
</style>
